<!-- 资讯管理 -->
<template>
  <div class="disFlx">
    <a-card :bordered="false" class="br-10 _mr-10">
      <Tree v-has="'content:consult:class:list'" @searchManagement="searchManagement" />
    </a-card>

    <a-card :bordered="false" class="br-10">
      <div v-has="'content:consult:list'" class="_pl-20">
        <div class="table-page-search">
          <a-form>
            <a-form-item label="资讯标题">
              <a-input v-model="queryParam.title" placeholder="资讯标题搜索" />
            </a-form-item>
            <span class="search-submitButtons">
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button class="_ml-8" @click="handleReset">重置</a-button>
            </span>
          </a-form>
        </div>
        <div class="table-operator disFlxJS">
          <div>
            <a-button
              v-has="'content:consult:add'"
              type="primary"
              @click="
                handleShow('add', {
                  ...queryParam
                })
              "
              >新建资讯</a-button
            >
          </div>
          <CustomTable :name="$route.name" :columns="columns" :newColumns="newColumns" />
        </div>
        <s-table
          ref="table"
          style="width:100%"
          size="default"
          rowKey="id, enabled, title"
          :columns="newColumns"
          :data="loadData"
          :rowSelection="null"
        >
          <!-- 序号 -->
          <!-- <span slot="serial" slot-scope="text, record, index">
          {{(pagination.current-1)*pagination.pageSize+parseInt(index)+1}}
        </span> -->
          <!-- 封面图 -->
          <span slot="coverUrl" slot-scope="text">
            <div class="disFlxCC">
              <ImgOrVideo :item="{ url: text }" preview :width="50" :height="40" />
            </div>
          </span>
          <!-- 浏览量 -->
          <span slot="browseNum" slot-scope="{ browseNum, virtualBrowseNum }">
            {{ browseNum }}/{{ virtualBrowseNum }}
          </span>
          <!-- 操作按钮 -->
          <span slot="action" slot-scope="text, record">
            <ButtonGroup :max-length="3">
              <a-button
                v-has="'content:consult:edit'"
                type="primary"
                ghost
                size="small"
                @click="handleShow('edit', record)"
              >
                编辑
              </a-button>
              <a-button
                v-has="'content:consult:add'"
                type="primary"
                ghost
                size="small"
                @click="handleShow('copy', record)"
              >
                复制
              </a-button>
              <a-button
                v-has="'content:consult:remove'"
                type="danger"
                ghost
                size="small"
                @click="handleDel([record.id])"
              >
                删除
              </a-button>
            </ButtonGroup>
          </span>
        </s-table>
      </div>
      <index-form ref="homepageForm" @add="$refs.table.refresh(true)" @upd="$refs.table.refresh()" />
    </a-card>
  </div>
</template>

<script>
import { STable } from '@/components'
import { consultGetList, consultDel } from '@/api/content/management'
import indexForm from './indexForm'
import Tree from './components/TreeType'
import CustomTable from '@/components/Cuscolumn'
import ImgOrVideo from '@/components/ImgOrVideo'
import ButtonGroup from '@/components/Table/buttonGroup'

export default {
  components: {
    STable,
    indexForm,
    Tree,
    CustomTable,
    ImgOrVideo,
    ButtonGroup
  },
  data() {
    return {
      pagination: {
        current: 1,
        pageSize: 10
      },
      queryParam: {
        title: '',
        module: null,
        moduleSub: null
      },
      columns: [
        {
          title: '标题',
          dataIndex: 'title',
          ellipsis: true
        },
        {
          title: '封面',
          dataIndex: 'coverUrl',
          width: '80px',
          scopedSlots: { customRender: 'coverUrl' }
        },
        {
          title: '浏览量实际/虚拟',
          width: '120px',
          scopedSlots: { customRender: 'browseNum' },
          ellipsis: true
        },
        {
          title: '发布时间',
          dataIndex: 'pubdate',
          width: '180px',
          ellipsis: true
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          width: '180px',
          ellipsis: true
        },
        {
          title: '操作',
          width: '200px',
          dataIndex: 'action',
          fixed: 'right',
          scopedSlots: { customRender: 'action' }
        }
      ],
      moduleValue: [],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        var params = {
          current: parameter.pageNum,
          size: parameter.pageSize
        }
        return consultGetList(Object.assign(params, this.queryParam))
          .then(res => {
            if (res.code === 0) {
              this.pagination.current = parameter.pageNum
              this.pagination.pageSize = parameter.pageSize
              return res
            } else {
              this.$message.error(res.msg)
            }
          })
          .catch(err => {
            this.$message.error(err.msg)
          })
      }
    }
  },
  computed: {
    newColumns() {
      const currentColumns = this.$store.state.user.customTable
      if (currentColumns && currentColumns[this.$route.name]) {
        return this.$options
          .data()
          .columns.filter(v => {
            const _items = currentColumns[this.$route.name].find(item => item === v.title || item.title === v.title)
            if (_items) return Object.assign(v, _items)
          })
          .sort((a, b) => {
            return a.tableSort - b.tableSort
          })
      } else {
        return this.columns
      }
    }
  },
  watch: {
    moduleValue(val) {
      if (val[0]) this.queryParam.module = val[0]
      if (val[1]) this.queryParam.moduleSub = val[1]
      if (val.length === 0) {
        this.queryParam.module = null
        this.queryParam.moduleSub = null
      }
    }
  },
  created() {},
  methods: {
    searchManagement(params) {
      this.queryParam = {
        ...this.queryParam,
        ...params
      }
      this.$refs.table.refresh(true)
    },
    handleReload() {
      this.$refs.table.refresh()
    },
    handleReset() {
      Object.keys(this.queryParam).forEach(k => {
        this.queryParam[k] = undefined
      })
      this.$refs.table.refresh(true)
    },
    // 打开资讯新增、编辑、复制弹窗
    handleShow(type, record) {
      var obj = JSON.parse(JSON.stringify(record))
      var params = {
        title: type === 'add' ? '新建资讯' : type === 'edit' ? '编辑资讯' : '复制资讯',
        type,
        data: obj
      }
      this.$refs.homepageForm.show(params)
    },
    // 删除
    handleDel(ids) {
      var _this = this
      this.$confirm({
        title: '删除?',
        content: '是否确定删除该资讯?',
        onOk() {
          consultDel(ids).then(res => {
            if (res.code === 0) {
              _this.$message.success(`删除成功`)
              _this.handleReload()
            } else {
              _this.$message.error(res.msg)
            }
          })
        },
        onCancel() {}
      })
    }
  }
}
</script>
<style scoped lang="less"></style>
